<template>
  <div ref="containerRef" class="custom-table-container">
    <vab-query-form>
      <vab-query-form-top-panel>
      <el-form-item>
          <el-button :icon="Plus" type="primary" @click="handleAdd">
            创建
          </el-button>
        </el-form-item>
      </vab-query-form-top-panel>
    </vab-query-form>
    <el-table
      v-loading="listLoading"
      :border="border"
      :data="list"
      :height="height"
      :size="lineHeight"
      :stripe="stripe"
    >
      <!--  TODO element-plus未知原因不支持拖拽后宽度重新计算，暂时放弃 -->
      <el-table-column
        v-for="(item, index) in finallyColumns"
        :key="index"
        align="center"
        :label="item.label"
        min-width="120"
        :prop="item.prop"
        :show-overflow-tooltip="true"
        :sortable="item.sortable"
        width="auto"
      >
        <template #default="{ row }">
          <span v-if="item.prop == 'is_ambiguous' || item.prop == 'is_end'">
            {{ row[item.prop] == 0 ? '否' : '是' }}
          </span>
          <span v-else>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" fixed="right" label="操作" width="180">
        <template #default="{ row }">
          <el-button
            class="but_text"
            text
            type="primary"
            @click="handleEdit(row)"
          >
            编辑
          </el-button>
          <el-button
            class="but_text"
            text
            type="primary"
            @click="handleDelete(row)"
          >
            删除
          </el-button>

        </template>
      </el-table-column>
      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.page"
      :layout="layout"
      :page-size="queryForm.page_size"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <edit ref="editRef" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import { getCategoryList, doDelete } from '@/api/enterpriseWeChat/picTitleCategory'
  import VabDraggable from 'vuedraggable'
  import { Delete, Plus, Search, Setting } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'TitleGalleryList',
    components: {
      Edit: defineAsyncComponent(() => import('./components/TableEdit')),
      VabDraggable,
    },
    setup() {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')
      const $baseTableHeight = inject('$baseTableHeight')

      const state = reactive({
        value: '1',
        editRef: null,
        border: true,
        height: $baseTableHeight(1),
        stripe: true,
        lineHeight: 'default',
        columns: [
          {
            label: 'ID',
            prop: 'id',
          },
          {
            label: '分类名称',
            prop: 'category_name',
          },
          {
            label: '添加时间',
            prop: 'created_at',
          },
          {
            label: '更新时间',
            prop: 'updated_at',
          },
        ],
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          page: 1,
          page_size: 10
        },
      })

      const dragOptions = computed(() => {
        return {
          animation: 600,
          group: 'description',
        }
      })
      const finallyColumns = computed(() => {
        return state.columns
      })

      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { list, total },
        } = await getCategoryList(state.queryForm)
        console.log(list)
        state.list = list
        state.total = total
        state.listLoading = false
      }
      const handleSizeChange = (val) => {
        state.queryForm.page_size = val
        const pageMax = Math.ceil(state.total / val)
        if (state.queryForm.page <= pageMax) {
          fetchData()
        }
      }
      const handleCurrentChange = (val) => {
        state.queryForm.page = val
        fetchData()
      }
      const queryData = () => {
        state.queryForm.page = 1
        fetchData()
      }

      const containerRef = ref(null)
      const { toggle, isFullscreen } = useFullscreen(containerRef)
      const clickFullScreen = () => {
        toggle().then(() => {
          handleHeight()
        })
      }
      const handleHeight = () => {
        if (isFullscreen.value) state.height = $baseTableHeight(1) + 356
        else state.height = $baseTableHeight(1)
      }
      const handleAdd = () => {
        state['editRef'].showEdit()
      }
      const handleEdit = (row) => {
        state['editRef'].showEdit(row)
      }
      const handleDelete = (row) => {
        if (row.id) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { message } = await doDelete({ id: row.id })
            $baseMessage(message, 'success', 'vab-hey-message-success')
            await fetchData()
          })
        }
      }
      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        dragOptions,
        containerRef,
        isFullscreen,
        finallyColumns,
        handleSizeChange,
        handleCurrentChange,
        queryData,
        handleHeight,
        clickFullScreen,
        fetchData,
        handleAdd,
        handleEdit,
        handleDelete,
        Plus,
        Delete,
        Search,
        Setting,
      }
    },
  })
</script>
<style lang="scss" scoped>
  @use 'sass:math';
  .custom-table-container {
    :deep() {
      i {
        cursor: pointer;
      }
    }

    .right-panel {
      .stripe-panel,
      .border-panel {
        margin: 0 10px #{math.div($base-margin, 2)} 10px !important;

        :deep() {
          .el-checkbox__label {
            margin-left: 0 !important;
          }
        }
      }

      [class*='ri'] {
        font-size: $base-font-size-big;
        color: var(--el-color-black);
      }
    }
  }
</style>
<style lang="scss">
  html body .custom-table-checkbox {
    [class*='ri'] {
      vertical-align: -0.5px !important;
      cursor: pointer;
    }

    .el-checkbox {
      margin: 5px 0 5px 8px;
    }
  }

  .custom-table-radio {
    width: 240px !important;
  }
</style>
